<ion-content>
  <div class="tab-heard" style="top: constant(safe-area-inset-top);top: env(safe-area-inset-top);">
    <div class="my-info">
      <div></div>
      <div class="portrait" (click)="toUrl()">
        <img onerror="src='assets/img/me/touxiang.png';onerror=null" src="{{avatarUrl}}">
        <div>{{userPhone?userPhone:'Edit'}}</div>
      </div>
      <div class="share"><img (click)="toUrl()" src="../../assets/img/me/fenxiang.png"></div>
    </div>
  </div>
  <div style="background: #4c4c4c;height: 195px; ">
    <div class="order">
      <label style="padding-top: 10px; padding-left: 10px;">My Orders</label>
      <span style="padding-top: 10px;padding-right: 10px;" (click)="queryOrder(10)">Check All Orders</span>
      <div class="tab-4-order-line" (click)="queryOrder(10)"></div>
      <nav id="nav" style="box-shadow: 0 0px 0px #ebebeb;border-radius: 5px;">
        <span (click)="queryOrder(10)">
          <img src="../../assets/img/me/pic.png" alt="">
          <h2>All orders</h2>
        </span>
        <span>
          <img src="../../assets/img/me/pic1.png" alt="" (click)="queryOrder(2)">
          <h2>Ordered</h2>
        </span>
        <span>
          <img src="../../assets/img/me/pic2.png" alt="" (click)="queryOrder(4)">
          <h2>Shipped</h2>
        </span>
        <span>
          <img src="../../assets/img/me/pic3.png" alt="" (click)="queryOrder(0)">
          <h2>Delivered</h2>
        </span>
      </nav>
      <!-- <div class="tab-4-line">
          <ion-label>物流信息</ion-label>
      </div> -->
      <div class="gongneng">
        <nav id="nav" style="box-shadow: 0 0px 0px #ebebeb;border-radius: 5px;">
          <span [routerLink]="['/account-info']" routerLinkActive="router-link-active">
            <img src="../../assets/img/me/pic4.png" alt="">
            <h2>Account information </h2>
          </span>
          <span [routerLink]="['/ttkefu']" routerLinkActive="router-link-active">
            <div *ngIf="isShowMsg()" style=" float: right;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              color: #ffffff;
              font-size: 2px;
              background: red;
              margin-left: 13.6%;
              position: absolute; ">
              </div>
            <img src="../../assets/img/me/pic5.png" alt="">
            <h2>Customer service </h2>
          </span>
          <span [routerLink]="['/collect-list']" routerLinkActive="router-link-active">
            <img src="../../assets/img/me/pic6.png" alt="">
            <h2>My favorites</h2>
          </span>
          <span [routerLink]="['/discount']" routerLinkActive="router-link-active">
            <img src="../../assets/img/me/pic7.png" alt="">
            <h2>Coupons</h2>
          </span>
        </nav>
      </div>
    </div>
  </div>

  <div class="list">
    <div class="item" [routerLink]="['/my-message']" routerLinkActive="router-link-active">
      <div>Notifications      </div>
      <img src="../../assets/img/me/xiangyou.png" alt="">
    </div>
    <div class="item" [routerLink]="['/friends-share']" routerLinkActive="router-link-active">
      <div>Refer & Earn</div>
      <img src="../../assets/img/me/xiangyou.png" alt="">
    </div>
    <div class="item" [routerLink]="['/faq']" routerLinkActive="router-link-active">
      <div>F&Q</div>
      <img src="../../assets/img/me/xiangyou.png" alt="">
    </div>
    <div class="item" [routerLink]="['/setting']" routerLinkActive="router-link-active">
      <div>Settings</div>
      <img src="../../assets/img/me/xiangyou.png" alt="">
    </div>
    <div class="item" (click)="exit()">
      <div>Sign out </div>
      <img src="../../assets/img/me/xiangyou.png" alt="">
    </div>
  </div>
</ion-content>